<template>
  <view class="container">
    <!-- 顶部标签栏 -->
    <view class="tab-header">
      <view class="tab-nav">
        <view 
          v-for="(tab, index) in tabs" 
          :key="index"
          :class="['tab-item', currentTab === index ? 'active' : '']"
          @tap="switchTab(index)"
        >
          <text class="tab-text">{{ tab }}</text>
          <view class="tab-indicator" v-if="currentTab === index"></view>
        </view>
      </view>
    </view>
    
    <!-- 内容区域 -->
    <swiper 
      class="content-swiper"
      :current="currentTab"
      @change="handleSwiperChange"
      style="flex: 1;"
    >
      <!-- 团签介绍列表 -->
      <swiper-item>
        <scroll-view 
          scroll-y 
          class="scroll-list"
          @scrolltolower="loadMore(0)"
        >
          <view class="guide-list">
            <view 
              class="guide-card" 
              v-for="(item, index) in lists[0]" 
              :key="index"
              @tap="navigateToDetail(item, 0)"
            >
              <image class="guide-image" :src="item.image" mode="aspectFill"></image>
              <view class="guide-content">
                <text class="guide-title">{{ item.title }}</text>
                <view class="guide-info">
                  <text class="guide-date">更新于: {{ item.updateDate }}</text>
                  <text class="guide-views">{{ item.views }}次浏览</text>
                </view>
                <text class="guide-desc">{{ item.description }}</text>
              </view>
            </view>
          </view>
          
          <!-- 底部安全区域 -->
          <view style="height: 160rpx;"></view>
        </scroll-view>
      </swiper-item>
      
      <!-- 旅游攻略列表 -->
      <swiper-item>
        <scroll-view 
          scroll-y 
          class="scroll-list"
          @scrolltolower="loadMore(1)"
        >
          <view class="guide-list">
            <view 
              class="guide-card" 
              v-for="(item, index) in lists[1]" 
              :key="index"
              @tap="navigateToDetail(item, 1)"
            >
              <image class="guide-image" :src="item.image" mode="aspectFill"></image>
              <view class="guide-content">
                <text class="guide-title">{{ item.title }}</text>
                <view class="guide-info">
                  <text class="guide-date">{{ item.updateDate }}</text>
                  <view class="guide-tag-container">
                    <text class="guide-tag" v-for="(tag, tagIndex) in item.tags" :key="tagIndex">{{ tag }}</text>
                  </view>
                </view>
                <text class="guide-desc">{{ item.description }}</text>
              </view>
            </view>
          </view>
          
          <!-- 底部安全区域 -->
          <view style="height: 160rpx;"></view>
        </scroll-view>
      </swiper-item>
    </swiper>
    
    <!-- TabBar组件 -->
    <cc-myTabbar :tabBarShow="3"></cc-myTabbar>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 标签页相关
      tabs: ['团签介绍', '旅游攻略'],
      currentTab: 0,
      
      // 列表数据
      lists: [
        // 团签介绍数据
        [
          {
            id: 'visa-001',
            title: '韩国团体签证办理全攻略',
            image: 'https://picsum.photos/id/1031/800/600',
            updateDate: '2023-08-15',
            views: 3248,
            description: '韩国团签是目前去韩国旅游最经济实惠的签证类型，适合5人以上团体。本指南详细介绍团签办理流程、所需材料和注意事项。'
          },
          {
            id: 'visa-002',
            title: '韩国团签VS个人签证：如何选择最适合你的签证类型',
            image: 'https://picsum.photos/id/1036/800/600',
            updateDate: '2023-09-05',
            views: 2176,
            description: '详细对比韩国团体签证和个人签证的优缺点、费用差异、办理时间及适用人群，帮助你做出最明智的选择。'
          },
          {
            id: 'visa-003',
            title: '2023年最新韩国团签政策解读',
            image: 'https://picsum.photos/id/119/800/600',
            updateDate: '2023-10-18',
            views: 5632,
            description: '解读韩国最新团体签证政策变化，包括材料要求变更、审核标准调整以及疫情后签证新规，确保您的申请一次通过。'
          }
        ],
        // 旅游攻略数据
        [
          {
            id: 'travel-001',
            title: '首尔三日游完美行程规划',
            image: 'https://picsum.photos/id/193/800/600',
            updateDate: '2023-09-20',
            tags: ['首尔', '打卡', '美食'],
            description: '精心规划的首尔三日游路线，覆盖明洞、东大门、景福宫等热门景点，包含地铁路线图和省钱小贴士。'
          },
          {
            id: 'travel-002',
            title: '韩国必买清单：2023年最值得带回家的韩国好物',
            image: 'https://picsum.photos/id/237/800/600',
            updateDate: '2023-10-15',
            tags: ['购物', '美妆', '伴手礼'],
            description: '从美妆个护到家居小物，精选韩国最具性价比和特色的购物清单，告诉你去哪买最便宜。'
          },
          {
            id: 'travel-003',
            title: '济州岛自由行全攻略',
            image: 'https://picsum.photos/id/268/800/600',
            updateDate: '2023-08-08',
            tags: ['济州岛', '自由行', '海岛'],
            description: '济州岛最全面的旅游指南，包括交通方式、住宿推荐、景点分布和当地美食，让您的济州岛之行轻松愉快。'
          }
        ]
      ],
      loading: [false, false],
      hasMore: [false, false]
    };
  },
  
  mounted() {
    // 设置状态栏为白色背景黑色字体
    uni.setNavigationBarColor({
      frontColor: '#000000',
      backgroundColor: '#FFFFFF'
    });
  },
  
  methods: {
    // 切换标签
    switchTab(index) {
      this.currentTab = index;
    },
    
    // 处理滑动切换
    handleSwiperChange(e) {
      this.currentTab = e.detail.current;
    },
    
    // 加载更多
    loadMore(tabIndex) {
      // 简化版，不实际加载更多数据
      console.log(`${this.tabs[tabIndex]}加载更多`);
    },
    
    // 导航到详情页
    navigateToDetail(item, tabIndex) {
      console.log('查看详情:', item.title);
      // 假设有一个详情页面
      uni.navigateTo({
        url: `/pages/introduce/detail?id=${item.id}&type=${tabIndex}`
      });
    }
  }
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #F2F2F7;
}

/* 顶部标签栏样式 - 固定在顶部 */
.tab-header {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  height: 88rpx;
  background-color: #FFFFFF;
  z-index: 100;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.tab-nav {
  display: flex;
  justify-content: center;
  height: 100%;
  position: relative;
}

.tab-item {
  position: relative;
  padding: 0 48rpx;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tab-text {
  font-size: 32rpx;
  color: #8E8E93;
  font-weight: 500;
  transition: color 0.3s;
}

.tab-item.active .tab-text {
  color: #007AFF;
  font-weight: 600;
}

.tab-indicator {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 48rpx;
  height: 6rpx;
  background-color: #007AFF;
  border-radius: 3rpx;
  transition: all 0.3s ease-in-out;
}

/* Swiper和内容区域 */
.content-swiper {
  height: calc(100vh - 88rpx - 110rpx);
}

.scroll-list {
  height: 100%;
  padding: 30rpx 30rpx 0 30rpx;
  box-sizing: border-box;
}

/* 卡片列表样式 */
.guide-list {
  width: 100%;
}

.guide-card {
  margin-bottom: 30rpx;
  border-radius: 24rpx;
  background-color: #FFFFFF;
  overflow: hidden;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
  transition: transform 0.3s;
}

.guide-card:active {
  transform: scale(0.98);
}

.guide-image {
  width: 100%;
  height: 400rpx;
  object-fit: cover;
}

.guide-content {
  padding: 30rpx;
}

.guide-title {
  font-size: 34rpx;
  font-weight: 500;
  color: #1C1C1E;
  margin-bottom: 16rpx;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.guide-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
}

.guide-date {
  font-size: 26rpx;
  color: #8E8E93;
}

.guide-views {
  font-size: 26rpx;
  color: #8E8E93;
}

.guide-tag-container {
  display: flex;
  flex-wrap: wrap;
}

.guide-tag {
  font-size: 24rpx;
  color: #007AFF;
  background-color: #E3F2FD;
  padding: 6rpx 16rpx;
  border-radius: 12rpx;
  margin-left: 12rpx;
}

.guide-desc {
  font-size: 28rpx;
  color: #8E8E93;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
  .content-swiper {
    height: calc(100vh - 88rpx - 110rpx - constant(safe-area-inset-bottom));
    height: calc(100vh - 88rpx - 110rpx - env(safe-area-inset-bottom));
  }
}
</style>
